<template>
	<div class="wrapper lieBiao">
		<myhead :activeIndex="`/knowledgeList?name=${knowledge}&id=${knowledgeId}`"></myhead>
		<div class="content center align-start fWrap box-item">
			<div class="left flex">
				<div class="bfff left-top">
					<!-- 默认搜索框 -->
					<div class="center title fWrap">
						<img src="@/assets/image/zhuTi/t1.png" alt="" class="disNo" />
						<div class="hr disNo"></div>
						<div class="f20 c333 fbold titleFs">{{ knowledge }}</div>
						<!-- <input
							type="text"
							placeholder="请输入内容进行搜索"
							v-model="content"
							@keyup.enter.native="searchList"
						/>
						<el-button class="search-btn" type="primary" :icon="Search" @click="searchList">
							搜索
						</el-button> -->
						<div @click="setShowMore" class="flex tRight f14 ctheme pointer disNo">
							{{ showMore ? "收起" : "展开" }}
						</div>
						<el-icon @click="setShowMore" class="pointer disNo" size="18" color="#2972FA">
							<ArrowUp v-if="showMore" />
							<ArrowDown v-else />
						</el-icon>
					</div>
					<!-- 高级搜索展开部分 -->
					<div class="left-top-content" v-if="showMore">
						<div class="center row nav navs">
							<div class="navs-box">
								<div class="label f14 c333">标题:</div>
								<div class="flex">
									<el-input class="authors" v-model="content"></el-input>
								</div>
							</div>
							<div class="navs-box">
								<div class="label f14 c333">作者:</div>
								<div class="flex">
									<el-input class="author" v-model="userName"></el-input>
								</div>
							</div>
						</div>
						<!-- <div class="center row nav"></div> -->
						<div class="center row disNo">
							<div class="label f14 c333">已选条件:</div>
							<div class="flex center fWrap flex-start">
								<div>
									<el-tag
										class="choice-tag"
										closable
										round
										effect="light"
										@close="delLists(index)"
										v-for="(item, index) in divideNames"
										:key="index"
										><div style="display: flex">
											<div>所属分类：</div>
											<div class="menu-item">{{ item }}</div>
										</div></el-tag
									>

									<el-tag
										class="choice-tag"
										closable
										round
										effect="light"
										@close="delListsTime"
										v-if="listStr != ''"
										>发布时间：{{ listStr }}</el-tag
									>

									<el-button
										type="primary"
										link
										@click="delList"
										v-if="divideList.length > 0 || listStrName.length > 0 || listStr.length > 0"
										>清空筛选</el-button
									>
								</div>
							</div>
						</div>
						<div class="center row nav">
							<div class="label f14 c333">所属分类:</div>
							<div class="flex center flex-start fen-ax">
								<!-- <div class="c666 f31 hover ctheme">不限</div> -->
								<div
									class="c666 f14 hover"
									:class="isActive(item) ? 'ctheme' : ''"
									@click="divides(item, index)"
									v-for="(item, index) in divide"
									:key="item.id"
								>
									{{ item.name }}
								</div>
							</div>
							<el-switch v-model="switchValue" active-text="多选" class="disNo" />
						</div>
						<div class="form-item">
							<div class="center row nav" v-for="(item, index) in expand" :key="index">
								<!-- @change="onChangeFor(index)" -->
								<div class="label f14 c333">{{ item.name }}:</div>
								<div class="flex">
									<el-input
										class="author"
										v-if="item.form_type == 1"
										v-model="expandList[item.prop_name]"
									></el-input>
									<el-select
										v-model="expandList[item.prop_name]"
										v-if="item.form_type == 5"
										clearable
									>
										<el-option
											v-for="item in JSON.parse(item.select_frame)"
											:key="item.name"
											:label="item.name"
											:value="item.name"
										/>
									</el-select>
								</div>
							</div>
						</div>
						<div class="center row nav">
							<div class="label f14 c333">发布时间:</div>
							<div class="flex center fWrap flex-start">
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '1' }" @click="noLimit">
									不限
								</div>
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '2' }" @click="aWeek">
									近一个月
								</div>
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '3' }" @click="march">
									近三个月
								</div>
								<div
									class="c666 f14 hover disNo"
									:class="{ ctheme: actives == '4' }"
									@click="halfAyear"
								>
									近半年
								</div>
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '5' }" @click="year">
									近一年
								</div>
								<div class="send-time">
									<el-date-picker
										v-model="time"
										type="daterange"
										range-separator="-"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										value-format="YYYY-MM-DD HH:mm:ss"
										:clearable="false"
										@change="onPicker"
									/>
									<!-- :disabled-date="pickerOptions" -->
								</div>
							</div>
						</div>
						<div class="soul-box">
							<el-button type="primary" class="soul-box-primary" @click="searchList">搜索</el-button>
							<el-button @click="resetting">重置</el-button>
						</div>
					</div>
				</div>
				<div class="bfff left-bottom">
					<div class="center table-head">
						<div class="c666 f14 choice-num">
							已选：<span v-if="deleteList && deleteList.length">{{ deleteList.length }}</span>
							<span v-else>0</span>
						</div>
						<div class="c666 f14 disNo7">排序：</div>
						<el-select v-model="sort" class="paiXu disNo7" placeholder="Select" @change="onOption">
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<div class="center colum pointer sheng-jiang disNo7" @click="sorts()">
							<div v-if="sortSte == 'ASC'" style="display: flex; flex-direction: column">
								<el-icon size="15" color="#2972FA">
									<CaretTop />
								</el-icon>
								<el-icon size="15" color="#c0c4cc">
									<CaretBottom />
								</el-icon>
							</div>
							<div v-else style="display: flex; flex-direction: column">
								<el-icon size="15" color="#c0c4cc">
									<CaretTop />
								</el-icon>
								<el-icon size="15" color="#2972FA">
									<CaretBottom />
								</el-icon>
							</div>
						</div>
						<div class="center f14 c999" style="cursor: pointer">
							展示形式：<span @click="isShowType(true)">
								<el-icon class="icon-table" size="20" :class="{ lan: isShow }">
									<ScaleToOriginal /> </el-icon></span
							><span @click="isShowType(false)">
								<el-icon class="icon-table" size="20" :class="{ lan: !isShow }"> <Tickets /> </el-icon
							></span>
						</div>
						<el-icon class="hover disNo7" size="15" color="#C0C4CC" @click="addCurrnt(1)">
							<ArrowLeft />
						</el-icon>
						<div class="center page f14 c999 disNo7">
							<span class="c333" v-if="lengthStr(total)">{{ current }}</span
							><span v-else>0</span>&nbsp;/&nbsp;{{ lengthStr(total) }}
						</div>
						<el-icon class="hover disNo7" size="15" color="#333" @click="addCurrnt(2)">
							<ArrowRight />
						</el-icon>
						<el-icon class="RefreshRight pointer disNo8" size="20" color="#2972FA" @click="shuaxin">
							<RefreshRight />
						</el-icon>
						<div class="center flex flex-end">
							<el-button
								class="danger"
								type="danger"
								plain
								@click="onDel"
								v-if="dataList && dataList.length"
								>删除</el-button
							>
							<el-button class="primary" type="primary" @click="add">发布</el-button>
						</div>
					</div>
					<div class="table" v-if="isShow">
						<el-table
							@cell-click="cellClick"
							@select="onSelect"
							@select-all="onSelectAll"
							:data="dataList"
							style="width: 100%"
							:height="550"
						>
							<el-table-column align="center" type="selection" min-width="50" />
							<el-table-column align="center" type="index" label="序号" min-width="60" fixed>
								<template #default="scope">
									<span>{{ (current - 1) * pageSize + scope.$index + 1 }}</span>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="title"
								label="标题"
								show-overflow-tooltip
								min-width="200"
							>
								<template #default="{ row }">
									<el-button link type="primary">{{ row.title }}</el-button>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="categoryName"
								label="分类"
								show-overflow-tooltip
								min-width="100"
							/>
							<el-table-column align="center" prop="userName" label="作者" min-width="100" />
							<el-table-column
								align="center"
								prop="createTime"
								label="发布日期"
								show-overflow-tooltip
								min-width="100"
							>
								<template #default="{ row }">
									<div>
										{{ times(row.createTime) }}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="status" label="状态" min-width="60">
								<template #default="{ row }">
									<div :class="row.status == 1 ? 'ctheme' : 'cff9'">
										{{ row.status == 1 ? "发布" : "未发布" }}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="readCount" align="center" label="浏览量" min-width="80">
								<template #default="{ row }">
									<div class="c45">{{ row.readCount }}</div>
								</template>
							</el-table-column>
							<template #empty>
								<el-empty description="暂无数据" />
							</template>
						</el-table>
					</div>
					<div v-else style="min-height: 500px">
						<div class="table-item" v-for="item in dataList" :key="item.id">
							<div class="table-checkbox">
								<el-checkbox v-model="deleteList" size="large" :label="item.id">
									<template #default></template>
								</el-checkbox>
							</div>
							<div class="table-flex" @click="cellClick(item)">
								<div>
									<div class="f14 table-item-left">
										<span class="">标题：{{ item.title }}</span>
									</div>
									<div class="f14 table-item-left">
										<span class="">发布日期：{{ times(item.createTime) }}</span>
									</div>
									<div class="f14 table-item-left">
										<span class="">作者：{{ item.userName }}</span>
									</div>
									<div class="table-item-bq">
										<div class="f14">
											<span>状态：</span>
											<span :class="item.status == 1 ? 'ctheme' : 'cff9'">
												{{ item.status == 1 ? "发布" : "未发布" }}
											</span>
										</div>
									</div>
								</div>
								<div class="f14">
									<span>浏览 （{{ item.readCount }}）</span>
								</div>
							</div>
						</div>
					</div>
					<div class="bfff paginationClass">
						<v-pagination
							:total="total"
							v-model:size="pageSize"
							v-model:page="current"
							@pagination="list"
							@paginations="list"
						></v-pagination>
					</div>
				</div>
			</div>
			<div class="right">
				<tuiJian :id="route.query.id"></tuiJian>
				<zuiJin :id="route.query.id"></zuiJin>
			</div>
		</div>
		<!-- 新建蒙层 -->
		<el-dialog v-model="visible" :show-close="false" :close-on-click-modal="false" destroy-on-close>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/zhuTi/xin.png" alt="" />
					<div class="flex f20 fbold">选择主题知识库</div>
					<el-icon class="pointer" size="20" color="#fff" @click="close">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<div v-if="data && data.length">
					<el-tree
						:data="data"
						@node-click="handleNodeClick"
						:props="{ value: 'id', label: 'name', children: 'children' }"
					/>
				</div>
				<div v-else class="dialog-prompt">
					<div v-if="dataObj.code == 2022">{{ dataObj.data }}</div>
					<div v-if="dataObj.code == 2023" @click="onToBase" class="dialog-prompt-code">
						{{ dataObj.data }}
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="visible = false">取消</el-button>
					<el-button type="primary" @click="onYes" :disabled="data.length == 0"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
		<v-myfoot></v-myfoot>
	</div>
</template>

<script setup>
import { watch } from "vue"
import { RefreshRight, Tickets, ScaleToOriginal } from "@element-plus/icons-vue"
import tuiJian from "./components/tuijian.vue"
import zuiJin from "./components/zuijin.vue"
import { getAxios, postAxios } from "/axios"
import { useFormatDate } from "/utils/useDate.js"
import { ElMessage, ElMessageBox } from "element-plus"
import { Base64 } from "js-base64"
const route = useRoute()
const router = useRouter()
const total = ref(0)
const isShow = ref(true)
const listStr = ref("")
//升降排序
const sortSte = ref("DESC")
const switchValue = ref(false)
const showMore = ref(true)
const visible = ref(false)
//新建
const data = ref([])
//新建知识swId
const listStrName = ref("")
const swId = ref("")
const ids = ref("")
//分类
const divide = ref([])
//时间
const time = ref([])
//分类
let divideList = ref([])
//拓展
const expand = ref([])
const expandList = ref([])
let dataObj = ref({})
const checked = ref([
	{
		id: "",
		name: "不限",
	},
])
//删除
const divideNames = computed(() => divideList.value.map(item => item.name))
const deleteList = ref([])
//数据
const dataList = ref([])
//搜索内容
const content = ref("")
//作者
const userName = ref("")
const pageSize = ref(10)

//排序
const sort = ref("pub_time")
const options = [
	{
		value: "pub_time",
		label: "发布时间",
	},
	{
		value: "readCount",
		label: "浏览量",
	},
]
//时间index
const actives = ref("1")
const knowledge = ref("")
const knowledgeId = ref("")
const current = ref(1)
async function list() {
	if (route.query.swId && route.query.names) {
		const obj = {
			swId: route.query.id,
			sortField: sort.value,
			sortType: sortSte.value,
			categoryIds: route.query.swId,
		}
		const res = await getAxios(
			`/knowledge/kbBasicWarehouse/page?size=${pageSize.value}&current=${current.value}`,
			obj
		)
		total.value = +res.total
		dataList.value = res.records
		checked.value = [
			{
				id: route.query.swId,
				name: route.query.names,
			},
		]
		const objj = {
			id: route.query.swId,
			name: route.query.names,
		}
		divideList.value = [objj]
	} else {
		const res = await getAxios(
			`/knowledge/kbBasicWarehouse/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
		)
		total.value = +res.total
		dataList.value = res.records
	}
}

list()
const setShowMore = () => {
	showMore.value = !showMore.value
}
async function created() {
	knowledge.value = route.query.name
	knowledgeId.value = route.query.id
	if (localStorage.getItem("isShow")) {
		isShow.value = Boolean(localStorage.getItem("isShow") == "true")
	}
	expand.value = await getAxios(`/knowledge/kbModelCategory/findBySwId?swId=${route.query.id}`)
}
created()
async function indBySwWid() {
	divide.value = await getAxios(`/knowledge/kbCategory/findBySwWid?swId=${route.query.id}`)
	divide.value.unshift({
		id: "",
		name: "不限",
	})
	// expand.value = await getAxios(`/knowledge/kbModelCategory/findBySwId?swId=${route.query.id}`)
}
indBySwWid()
function times(times) {
	return times.substring(0, 10)
}

//高亮
function isActive(item) {
	return !!~checked.value.findIndex(check => check.id == item.id)
}
//分类
const divides = (item, index) => {
	if (checked.value[0].name == "不限") {
		checked.value.splice(0, 1)
	}
	if (switchValue.value) {
		if (isActive(item)) {
			const index = checked.value.findIndex(check => check.id == item.id)
			checked.value = checked.value.filter(check => check.id != item.id)
			divideList.value.splice(index, 1)
		} else {
			checked.value.push(item)
			divideList.value.push(item)
		}
	} else {
		checked.value = checked.value.filter(check => check.id != item.id)
		checked.value = []
		divideList.value = []
		checked.value.push(item)
		divideList.value.push(item)
	}
	if (divideList.value.length == 0) {
		empty()
	}
	if (item.name == "不限") {
		return router.push(`/knowledgeList?name=${route.query.name}&id=${route.query.id}`)
	}
	if (switchValue.value) {
		searchLists()
	} else {
		router.push(`/knowledgeList?name=${route.query.name}&id=${route.query.id}&names=${item.name}&swId=${item.id}`)
	}
}

//选择主题
const handleNodeClick = data => {
	swId.value = data.swId
	ids.value = data.id
}
watch(switchValue, () => {
	if (!switchValue.value) {
		checked.value = [
			{
				id: "",
				name: "不限",
			},
		]
		divideList.value = []
	}
})
watch(route, () => {
	knowledge.value = route.query.name
	knowledgeId.value = route.query.id
	switchValue.value = false
	empty()
	list()
	created()
})
//重置
const resetting = () => {
	router.push(`/knowledgeList?name=${route.query.name}&id=${route.query.id}`)
	empty()
}
//搜索
const searchList = () => {
	searchLists(sort.value, sortSte.value)
	current.value = 1
}
const searchLists = async () => {
	const list = []
	if (!switchValue.value && divideList.value.length) {
		list[0] = divideList.value[0].id
	} else {
		divideList.value.forEach(item => {
			list.push(item.id)
		})
	}
	const obj = {
		swId: route.query.id,
		fromTime: time.value[0],
		endTime: time.value[1],
		sortField: sort.value,
		sortType: sortSte.value,
	}
	if (!content.value == "") {
		obj.title = content.value
	}
	if (list.length > 0) {
		obj.categoryIds = list.join()
	}
	if (!userName.value == "") {
		obj.userName = userName.value
	}
	if (expand.value) {
		let listKey = Object.keys(expandList.value)
		let listValue = []
		let objList = []
		listKey.forEach(item => {
			listValue.push(expandList.value[item])
		})
		const asfasf = Object.values(expandList.value)
		for (let i = 0; i < asfasf.length; i++) {
			if (listValue[i] != "") {
				objList.push({
					field: listKey[i],
					data: listValue[i],
					code: expand.value[i].code,
					type: expand.value[i].form_type,
				})
			}
		}
		console.log(objList)
		if (objList && objList.length) {
			obj.extend = Base64.encode(JSON.stringify(objList))
		}
	}
	const res = await getAxios(`/knowledge/kbBasicWarehouse/page?size=10&current=${current.value}`, obj)
	total.value = +res.total
	dataList.value = res.records
}
//清空
const delLists = index => {
	divideList.value.splice(index, 1)
	checked.value.splice(index, 1)
	if (divideList.value.length == 0) {
		checked.value = [
			{
				id: "",
				name: "不限",
			},
		]
	}
}
const delListsTime = index => {
	listStr.value = ""
	actives.value = "1"
	time.value = ""
}
const delList = () => {
	empty()
	if (route.query.swId && route.query.names) {
		router.push(`/knowledgeList?name=${route.query.name}&id=${route.query.id}`)
	} else {
		list()
	}
}

// 时间
const noLimit = () => {
	actives.value = "1"
	time.value = []
	listStr.value = "不限"
	searchLists()
}
const onPicker = val => {
	actives.value = "1"
	listStr.value = time.value[0].slice(0, 10) + "-" + time.value[1].slice(0, 10)
	searchLists()
}
// 月
const aWeek = () => {
	actives.value = "2"
	const d = new Date()
	const sd = new Date(d.getTime() - 30 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近一个月"

	searchLists()
}
// 三个月
const march = () => {
	actives.value = "3"
	const d = new Date()
	const sd = new Date(d.getTime() - 90 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近三个月"
	searchLists()
}
//半年
const halfAyear = () => {
	actives.value = "4"
	const d = new Date()
	const sd = new Date(d.getTime() - 183 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近半年"

	searchLists()
}
// 年
const year = () => {
	actives.value = "5"
	const d = new Date()
	const sd = new Date(d.getTime() - 365 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近一年"

	searchLists()
}
//表格
const onSelect = row => {
	deleteList.value = []
	row.forEach(item => {
		deleteList.value.push(item.id)
	})
}
const onSelectAll = selection => {
	deleteList.value = []
	selection.forEach(item => {
		deleteList.value.push(item.id)
	})
}
//删除
const onDel = async () => {
	if (deleteList.value && deleteList.value.length) {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			try {
				const res = await postAxios("/knowledge/kbBasic/deleteBatch", deleteList.value)
				if (!res == "删除成功") {
					ElMessage.success(res)
					deleteList.value = []
				} else {
					ElMessage.success("删除成功")
					deleteList.value = []
				}
				list()
			} catch (error) {
				ElMessage.error(error)
			}
		})
	} else {
		ElMessage.error("请选择知识")
	}
}
//排序
const onOption = async val => {
	searchLists()
}

const cellClick = row => {
	try {
		router.push(`/knowledgeDetails?id=${row.id}&swId=${row.swId}`)
	} catch (error) {
		ElMessage.error(error)
	}
}

const add = async () => {
	visible.value = true
	data.value = []
	dataObj.value = {}
	const res = await getAxios(`/knowledge/kbCategory/findBySwWidToBackstageAdd?swId=${route.query.id}`)
	if (res instanceof Array) {
		data.value = res
	} else {
		dataObj.value = res
	}
}
const onYes = async () => {
	if (swId.value) {
		router.push(`/knowledgeCreation?swId=${swId.value}&id=${ids.value}&name=${route.query.name}`)
	} else {
		ElMessage.error("请选择知识库分类")
	}
}
const sorts = async () => {
	if (sortSte.value == "ASC") {
		sortSte.value = "DESC"
	} else {
		sortSte.value = "ASC"
	}
	searchLists()
}
function lengthStr(val) {
	return Math.ceil(val / 10)
}
//清空
function empty() {
	checked.value = [
		{
			id: "",
			name: "不限",
		},
	]
	content.value = ""
	sort.value = "pub_time"
	time.value = []
	userName.value = ""
	divideList.value = []
	expandList.value = []
	listStrName.value = ""
	listStr.value = ""
	actives.value = "1"
	deleteList.value = []
}
const shuaxin = () => {
	dataList.value = []
	searchLists(sort.value, sortSte.value)
}
const addCurrnt = async val => {
	if (current.value != 1) {
		switch (val) {
			case 1:
				current.value -= 1
				break
			case 2:
				if (current.value < lengthStr(total.value)) current.value += 1
				break
		}
	} else {
		switch (val) {
			case 2:
				if (current.value < lengthStr(total.value)) current.value += 1
				break
		}
	}
	const res = await getAxios(
		`/knowledge/kbBasicWarehouse/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
	)
	total.value = +res.total
	dataList.value = res.records
}
const isShowType = val => {
	isShow.value = val
	localStorage.setItem("isShow", val)
}
function pickerOptions(time) {
	return time.getTime() > Date.now()
}
const onToBase = () => {
	router.push(`/knowledgeClassification?name=${route.query.name}&id=${route.query.id}`)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";

.form-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	@include maxWidth(830) {
		display: flex;
	}

	@include maxWidth(600) {
		display: block;
	}

	.center {
		width: 33%;

		@include maxWidth(1400) {
			width: 33%;
		}

		@include maxWidth(768) {
			width: 50%;
		}

		@include maxWidth(600) {
			width: 100%;
		}
	}
}

.lieBiao {
	background-color: #f8f8f8;

	:deep(.el-dialog) {
		width: 50vw !important;
		overflow-y: auto;

		@include maxWidth(768) {
			width: 100vw !important;
		}
	}

	.box-item {
		// height: 78vh;
		overflow-y: auto;
	}

	:deep(.el-dialog__body) {
		padding: 30px !important;
		height: 300px !important;
		max-height: 500px !important;
		overflow-y: scroll !important;
	}

	:deep(.dialog-content .el-checkbox) {
		width: 100%;
		margin-right: 0;
	}
	.dialog-prompt {
		margin-top: 30px;
		text-align: center;
		.dialog-prompt-code {
			cursor: pointer;
			color: #2972fa;
		}
	}
	.left-bottom {
		padding: 20px;

		.table-head {
			border: 1px solid #eceef5;
			height: 50px;
			padding: 0 2%;

			.primary {
				width: 50px;
				height: 30px;
				border-radius: 3px;
			}

			.danger {
				width: 50px;
				height: 30px;
				border: 1px solid #fbc4c4;
				border-radius: 3px;
			}

			.RefreshRight {
				margin-left: 20px;
			}

			.RefreshRight:hover {
				background-color: #f4f4f4;
			}

			.sheng-jiang {
				margin-right: 10px;
			}

			:deep(.sheng-jiang .el-icon) {
				margin: -2px 0;
			}

			.page {
				width: 60px;

				@include maxWidth(750) {
					width: 30px;
				}
			}

			.paiXu {
				width: 100px;
				height: 30px;
				margin-right: 15px;
			}

			:deep(.paiXu .el-input__wrapper) {
				border-radius: 15px;
				height: 30px;
				color: #666666;
			}

			.choice-num {
				padding-right: 20px;

				@include maxWidth(400) {
					padding-right: 5px;
				}
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
		}

		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 50px;
			color: #606266;
		}
	}

	:deep(.el-button__text--expand .el-icon) {
		letter-spacing: 0;
	}

	.left-top-content {
		padding: 10px 15px;
		border: 1px solid #eceef5;
		margin-top: 20px;

		.author {
			width: 200px;
			height: 30px;
			border-radius: 3px;

			@include maxWidth(1600) {
				width: 150px;
			}

			@include maxWidth(1200) {
				width: 130px;
			}

			@include maxWidth(1024) {
				width: 110px;
			}

			@include maxWidth(768) {
				width: 140px;
			}

			@include maxWidth(700) {
				width: 120px;
			}
		}
		.authors {
			width: 350px;
			height: 30px;
			border-radius: 3px;

			@include maxWidth(1600) {
				width: 250px;
			}

			@include maxWidth(1200) {
				width: 130px;
			}

			@include maxWidth(1024) {
				width: 110px;
			}

			@include maxWidth(768) {
				width: 140px;
			}

			@include maxWidth(700) {
				width: 120px;
			}
		}
		.soul-box {
			margin-top: 10px;
			display: flex;
			justify-content: center;
			.soul-box-primary {
				margin-right: 20px;
			}
		}
		.nav {
			.c666 {
				margin-right: 15px;

				@include maxWidth(1050) {
					margin-right: 10px;
				}
			}
			:deep(.el-switch) {
				margin-left: 20px;
			}
		}
		.navs {
			justify-content: start;
			@include maxWidth(700) {
				height: 80px !important;
				display: block;
			}
			.navs-box {
				display: flex;
				margin-right: 30px;
				align-items: center;
				@include maxWidth(700) {
					margin-bottom: 10px;
				}
			}
		}
		:deep(.el-tag__close) {
			background-color: #2972fa;
			color: #fff;
		}

		.choice-tag {
			height: 25px;
			line-height: 1;
			background: #f4faff;
			border: 1px solid #2972fa;
			border-radius: 15px;
			padding: 0 10px;
			color: #2972fa;
			font-size: 12px;
			margin-right: 10px;
			.menu-item {
				text-align: center;
				max-width: 150px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.row {
			border-bottom: 1px dashed #eceef5;
			height: 45px;
		}

		.label {
			white-space: nowrap;
			width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			@include maxWidth(1400) {
				width: 80px;
			}
		}
	}

	.left-top {
		padding: 35px 25px;
		padding-bottom: 0;

		@include maxWidth(550) {
			padding: px2vw(35) px2vw(25);
			padding-bottom: 0;
		}

		.title {
			.tRight {
				margin-right: 10px;
			}

			:deep(.search-btn) {
				width: 80px;
				height: 30px;
				border-radius: 0 20px 20px 0;
			}

			input {
				width: 250px;
				height: 30px;
				line-height: 30px;
				background: #f5f6f7;
				border: 1px solid #e8e8ed;
				border-radius: 20px 0 0 20px;
				padding: 0 20px;
				margin-left: 20px;

				@include maxWidth(730) {
					width: 200px;
				}

				@include maxWidth(600) {
					width: 150px;
				}

				@include maxWidth(400) {
					width: 120px;
					margin-left: 5px;
					padding: 0 10px;
				}
			}

			.hr {
				width: 2px;
				height: 20px;
				background: #2972fa;
				opacity: 0.5;
				margin: 0 20px;
			}

			img {
				width: 30px;
				height: 30px;
			}
		}
	}

	.content {
		margin: 25px 50px;

		@include maxWidth(550) {
			margin: px2vw(25) px2vw(30);
		}
	}
}

.paginationClass {
	padding-top: 20px;
	display: flex;
	justify-content: center;
}

.table-item {
	border-bottom: 1px solid #f4f4f4;
	display: flex;

	.table-checkbox {
		padding-top: 50px;
		margin-right: 10px;
	}

	.table-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.table-item-bq {
			display: flex;
			justify-content: space-between;
			flex: 1;
		}

		.table-item-left {
			margin: 10px 0;
		}
	}
}

.icon-table {
	padding-top: 10px;
	margin-right: 10px;
}

.lan {
	color: #2972fa;
}

.right {
	@include maxWidth(1200) {
		width: 200px;
	}

	@include maxWidth(1024) {
		display: none;
	}
}

:deep(.el-range-editor.el-input__wrapper) {
	width: 280px;

	@include maxWidth(1024) {
		width: 230px;
	}

	@include maxWidth(768) {
		width: 180px;
	}

	@include maxWidth(738) {
		width: 160px;
	}
}

.disNo {
	@include maxWidth(700) {
		display: none;
	}
}

.disNo8 {
	@include maxWidth(800) {
		display: none;
	}

	@include maxWidth(600) {
		display: none;
	}
}

.disNo7 {
	@include maxWidth(700) {
		display: none;
	}
}

.titleFs {
	max-width: 500px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	@include maxWidth(550) {
		font-size: 14px;
	}

	@include maxWidth(450) {
		font-size: 12px;
	}
}

.fen-ax {
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;
}
</style>
